<template>
  <div class="ProfitDetail-box">
    <div class="box-header">
      <h3>审核工单详情</h3>
      <i
        class="iconfont icon-icon-cross-empty"
        @click="closePopUps"
      ></i>
    </div>
    <div
      class="table-box"
      v-if="defineOrder"
    >
      <div class="table-header">
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">单据编号：</p>
            <p>{{ defineOrder.orderId }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">终端门店：</p>
            <p class="list-p-bg"> {{ defineOrder.customerStore }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">客户名称：</p>
            <p class="list-p-bg">{{ defineOrder.customerName }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">联系人：</p>
            <p>{{ defineOrder.contactPerson }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">合同金额：</p>
            <p class="list-p-bg">{{ defineOrder.contractAmount }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">客户最低利润率：</p>
            <p>{{ defineOrder.profitRateMin }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">销售单价: </p>
            <p>{{ totalPriceSalePrice }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">成本单价：</p>
            <p>{{ totalPrice }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">实际金额：</p>
            <p>{{ defineOrder.totalOrderAmount }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">实付金额：</p>
            <p>{{ defineOrder.actualPaymentPrice }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">交易日期：</p>
            <p>{{ defineOrder.startDate }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">收货日期：</p>
            <p>{{ defineOrder.endDate }}</p>
          </div>
        </div>
        <div class="main-list">
          <div class="list-left">
            <p class="title-p">制单人：</p>
            <p>{{ defineOrder.creator }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">开单时间：</p>
            <p>{{ defineOrder.orderDate }}</p>
          </div>
        </div>
        <div class="main-list list-end">
          <div class="list-left">
            <p class="title-p">成本合计：</p>
            <p>{{
                            parseFloat(defineOrder.materialFeeTotal) + parseFloat(defineOrder.installationFeeTotal) + parseFloat(defineOrder.urbanManagementFee)
                          }}</p>
          </div>
          <div class="list-right">
            <p class="title-p">交货日期：</p>
            <p>{{ defineOrder.deliveryDate }}</p>
          </div>
        </div>
        <div class="main-list list-end">
          <div class="list-left">
            <p class="title-p">利润率：</p>

            <p :class="lirunlv > defineOrder.profitRateMin ? ' greedClass' : 'redsClass'">{{ lirunlv }}%</p>

            <!-- <p :style=" 1 - (( parseFloat(defineOrder.materialFeeTotal) + parseFloat(defineOrder.installationFeeTotal) + parseFloat(defineOrder.urbanManagementFee) / parseFloat(defineOrder.contractAmount)) > defineOrder.profitRateMin?'redsClass':'greedClass'">{{-->
            <!--                            1 - (( parseFloat(defineOrder.materialFeeTotal) + parseFloat(defineOrder.installationFeeTotal) + parseFloat(defineOrder.urbanManagementFee) / parseFloat(defineOrder.contractAmount))|| '数据收集中'-->
            <!--                          }}</p> -->
          </div>
          <div class="list-right">

          </div>
        </div>
      </div>
      <div class="table-main">
        <div class="main-list list-start">
          <div class="main-left">
            订单利润详情
          </div>
          <div class="main-right">
            <el-table
              :data="profitTable"
              style="width: 100% ;overflow-y: scroll;"
              max-height="140px"
              :header-cell-style="{ 'color': `${bgColor}`, 'background': `${bg} !important` }"
            >
              <el-table-column
                prop="amount"
                label="订单总金额"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="grossProfit"
                label="毛利润"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="grossMargin"
                label="毛利率"
                width="120"
                show-overflow-tooltip
                align="center"
              />
              <el-table-column
                prop="incidentals"
                label="关联杂费"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="outsourcingTaxes"
                label="外协税金"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="materialFeeTotal"
                label="材料费"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="installationFeeTotal"
                label="安装费"
                width="120"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="urbanManagementFee"
                label="城管费"
                width="120"
                align="center"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </div>
        <!-- <div class="main-list">
                    <div class="main-left">
                        关联外协商
                    </div>
                    <div class="main-right">
                        <el-table :data="relevancyOutsourcingTable" style="width: 100%; overflow-y: scroll;"
                            max-height="140px"
                            :header-cell-style="{ 'color': `${bgColor}`, 'background': `${bg} !important` }">
                            <el-table-column prop="outsourcing" label="外协商" width="180" align="center" />
                            <el-table-column prop="documents" label="外协商单据" width="180" align="center" />
                            <el-table-column prop="detail" label="详细" width="180" align="center" />
                        </el-table>
                    </div>
                </div> -->
      </div>
      <div class="table-bottom">
        <div class="table-define">
          <el-table
            :data="orderTable"
            style="width: 100%; overflow-y: scroll;"
            max-height="180px"
            :header-cell-style="{ 'color': `${bgsColor}`, 'background': `${bgs} !important` }"
          >
            <el-table-column
              prop="businessType"
              label="业务类型"
              align="center"
            />
            <el-table-column
              prop="customerType"
              label="客户类型"
              align="center"
            />
            <el-table-column
              prop="productionContent"
              label="制作内容"
              align="center"
            />
            <el-table-column
              prop="width"
              label="高"
              align="center"
              width="40"
            />
            <el-table-column
              prop="height"
              label="宽"
              align="center"
              width="40"
            />
            <el-table-column
              prop="quantityPerPiece"
              label="件数"
              align="center"
            />
            <el-table-column
              prop="totalQuantity"
              label="数量"
              align="center"
            />
            <el-table-column
              prop="unit"
              label="单位"
              align="center"
              width="80"
            />
            <el-table-column
              prop="salePrice"
              label="销售单价"
              align="center"
            />
            <el-table-column
              prop="amount"
              label="销售金额"
              align="center"
            />
            <el-table-column
              prop="price"
              label="成本单价"
              align="center"
            />
            <el-table-column
              prop="salePriceAll"
              label="成本金额"
              align="center"
            />
            <el-table-column
              prop="materialFee"
              label="材料费"
              align="center"
            />
            <el-table-column
              prop="installationFee2"
              label="安装费(按天)"
              align="center"
            />
            <el-table-column
              prop="installationFee"
              label="安装费(固定)"
              align="center"
            />
            <el-table-column
              prop="urbanManagementFee"
              label="城管费"
              align="center"
            />
            <el-table-column
              prop="afterSalesService"
              label="后期服务"
              align="center"
            />
          </el-table>
        </div>
        <div class="table-outsourcing">
          <el-table
            :data="outsourcingTable"
            style="width: 100%; overflow-y: scroll;"
            max-height="180px"
            :header-cell-style="{ 'color': `${bgsColor}`, 'background': `${bgs} !important` }"
          >
            <el-table-column
              prop="externalVendorId"
              label="外协单号"
              width="180"
              align="center"
            />
            <el-table-column
              prop="externalVendor"
              label="外协商"
              width="180"
              align="center"
            />
            <el-table-column
              prop="costCategory"
              label="成本类型"
              align="center"
            />
            <el-table-column
              prop="detail"
              label="详细"
              align="center"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, defineEmits, computed } from 'vue'
// 表格颜色
let bg = '#062ABB'
let bgColor = "#fff"
let bgs = 'linear-gradient( 180deg, #DDECF9 0%, #FFFFFF 100%)'
let bgsColor = '#333333'
const emit = defineEmits(['closePopUps'])
const props = defineProps(['auditDataList'])
// 订单详情信息
let defineOrder = ref()
const totalPrice = computed(() => {
  let sum = 0
  defineOrder.value.productionVOS.forEach(v => {
    sum += v.price
  })
  return sum
})
const totalPriceSalePrice = computed(() => {
  let sum = 0
  defineOrder.value.productionVOS.forEach(v => {
    sum += v.salePrice
  })
  return sum
})

// 利润表格
let profitTable = ref([

])

// 订单表格
let orderTable = ref([

])
// 外协表格
let outsourcingTable = ref([

])
// 关闭弹窗
const closePopUps = () => {
  emit('closePopUps')
}
// 利润率
const lirunlv = ref('')
onMounted(() => {
  if (props.auditDataList) {
    // 统一流程
    props.auditDataList.productionVOS.forEach((v) => {
      v.customerType = props.auditDataList.customerType
      v.afterSalesService = props.auditDataList.afterSalesService
    })
    defineOrder.value = props.auditDataList
    orderTable.value = props.auditDataList.productionVOS

    const cbheji = parseFloat(defineOrder.value.materialFeeTotal) + parseFloat(defineOrder.value.installationFeeTotal) + parseFloat(defineOrder.value.urbanManagementFee)

    // 利润率 = 净利润 (工单金额 - 成本) / 工单金额 * 100
    lirunlv.value = (parseFloat(defineOrder.value.totalOrderAmount) - parseFloat(cbheji)) / parseFloat(defineOrder.value.totalOrderAmount) * 100
  }
})
</script>
<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.greedClass {
  color: green;
}
.redsClass {
  color: red;
}
.ProfitDetail-box {
  .box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 2023;
    position: sticky;
    top: 0;
    height: 40px;
    margin-bottom: 20px;

    h3 {
      @include publicH3;
    }

    .iconfont {
      color: #666;
      font-size: 27px;
    }
  }

  .table-box {
    padding: 0 20px;

    .table-header {
      border: 1px solid #a3a3a3;
      padding: 20px;

      .main-list {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #a3a3a3;

        .list-left,
        .list-right {
          display: flex;
          align-items: center;
          flex: 1;

          .title-p {
            font-weight: 600;
            font-size: 14px;
          }

          p {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }

          .list-p-bg {
            font-size: 14px;
            color: #1947ff;
          }
        }
      }

      .list-end {
        border-bottom: none;
      }
    }

    .table-main {
      border: 1px solid #a3a3a3;
      border-bottom: none;

      margin: 20px 0;

      .main-list {
        display: flex;
        align-items: center;
        height: 148px;

        .main-left {
          color: #1947ff;
          width: 130px;
          text-align: center;
          line-height: 148px;
          font-weight: 600;
        }
      }

      .list-start {
        border-bottom: 1px solid #a3a3a3;

        .main-right {
          width: 85%;
        }
      }
    }

    .table-bottom {
      border: 1px solid #a3a3a3;
      margin: 20px 0;
    }
  }
}
</style>
